<template>
   <footer class="footer">
      <span class="todo-count"><strong>{{leaveNum}}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a :class="{selected:type==='all'}" @click.stop="changeStatus('all')" href="#/">全部</a>
        </li>
        <li>
          <a :class="{selected:type==='pending'}" @click.stop="changeStatus('pending')" href="#/active">进行中</a>
        </li>
        <li>
          <a :class="{selected:type==='finished'}" @click.stop="changeStatus('finished')" href="#/completed">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="clearFinished">清除已完成</button>
    </footer>
</template>
<script>
export default {
  name: 'TodoFooter',
  props: {
    leaveNum: Number,
    type: String
  },
  methods: {
    clearFinished () {
      this.$emit('clearFinished')
    },
    changeStatus (type) {
      this.$emit('changeStatus', type)
    }
  },
  data () {
    return {}
  }

}
</script>c
<style lang='less' scoped>
</style>
